<template>
  <div class="box date-box">
    <div class="header">
      <div class="header_timer">时间选择</div>
      <el-date-picker
        v-model="clockDate"
        type="month"
        class="date-input"
        @change="changeDate"
        placeholder="选择月">
      </el-date-picker>
      <div style="width: 200px;height: 50px;margin-right: 80px;">
        <el-input class='date-input' placeholder="请输入内容" v-model="formData.staffName" >
          <el-button slot="prepend" icon="el-icon-s-custom"></el-button>
          <el-button @click="handleStaff" slot="append" icon="el-icon-plus"></el-button>
        </el-input>
        </div>
      <el-button
        type="primary"
        plain
        icon="el-icon-search"
        size="mini"
        @click="handleCheck"
      >查询</el-button>
      <el-button
        type="primary"
        plain
        size="mini"
        icon="el-icon-refresh-right"
        @click="handleReset"
      >重置</el-button>
    </div>
    <div class="content">
      <el-table
        :border="true"
        :data="List"
       >
        <el-table-column
          prop="staffName"
          align="center"
          fixed="left"
          width="100">
          <template slot="header" slot-scope="scope">
            <i class="el-icon-user-solid"></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="list"
          align="center"
          width="80"
          v-for="(item,index) in days"
          :key="index"
        >
          <template slot="header" slot-scope="scope">
            <i >{{item}}</i>
          </template>
          <template slot-scope="scope">
            <i v-for="(value,idx) in scope.row.list" :key="idx">
<!--              <i v-if="item == value.clockDate.substr(-2)">{{scope.row.list[idx].clockDate}}</i>-->
<!--              <i v-if="item == value.clockDate.substr(-2)">/</i>-->
              <i v-if="item == value.clockDate.substr(-2)">
                <el-tag v-if="scope.row.list[idx].dayClockStatus==0">正常</el-tag>
                <el-tag v-if="scope.row.list[idx].dayClockStatus==1" type="danger">异常</el-tag>
              </i>
            </i>
<!--            <i v-for="(value,idx) in scope.row" :key="idx">{{value.clockDate}}</i>-->
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          prop="realityDays"
          label="实打卡天数"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          prop="shouldDays"
          fixed="right"
          label="应打卡天数"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          prop="days"
          label="当月天数"
          align="center"
          fixed="right"
          width="80">
        </el-table-column>


      </el-table>
    </div>
    <importUser ref="importCustomer" @showUser="showCustomer"></importUser>

  </div>
</template>

<script>
import  importUser from '../common/user'
import  {attendanceList} from '@/api/module/attendance.js'
export default {
  name: "attendance",
  components:{importUser},
  data(){
    return {
      userName:'',//选中的人
      days:'',
      shouldDays:'',//应打卡天数
      realityDays:'',//实际打卡天数
      time:'',
      clockDate:'',
      formData:{
        clockDate:'',
        staffId:'',
        pageNum:1,
        pageSize:10,
        staffName:''
      },
      List:[],
    }
  },
  created() {
    this.getTime()
    this.getList()
  },
  methods:{
    //选时间
    changeDate(value){
      console.log(value)
      this.formData.clockDate=this.getSelet(value)
    },
    //选人
    handleStaff(){
      this.$refs.importCustomer.show();
    },
    handleReset(){
      this.clockDate=''
      this.formData={
          clockDate:'',
          staffId:'',
          pageNum:1,
          pageSize:10,
          staffName:''
      }
    },
    showCustomer(value){
      console.log(value)
      this.formData.staffName=value.staffName
      this.formData.staffId=value.staffId
    },
    handleCheck(){
      // console.log(this.formData.clockDate)
      // console.log(this.getSelet(this.formData.clockDate))
      // this.formData.clockDate=this.getTime(this.formData.clockDate)
      this.getList()
    },
    getSelet(value){
      const d = new Date(value)
      const resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + '01'
      const resTime = this.p(d.getHours()) + ':' + this.p(d.getMinutes()) + ':' + this.p(d.getSeconds())
      console.log(`${resDate}`)
      let days=new Date(d.getFullYear() , d.getMonth() + 1,0).getDate();
      console.log(days)
      this.days=days
      this.shouldDays=this.days-4
      return resDate
    },
    p(s){
      return s < 10 ? '0' + s : s
    },

    getTime(){
      let date=new Date()
      let year=date.getFullYear()
      let month=date.getMonth()+1
      let days=new Date(year, month,0).getDate();
      console.log(days)
      this.days=days
      //应打卡时间
      this.shouldDays=this.days-4
      if(month<10){
         month='0'+month
      }
      this.formData.clockDate=`${year}-${month}-01`
      console.log(this.formData.clockDate)
    },
    getList(){
      console.log(this.formData)
      attendanceList(this.formData).then(response=>{
        console.log(response)
        response.rows.forEach(item=>{
          item.days=this.days
          item.realityDays=item.list.length
          item.shouldDays =this.shouldDays
        })
        this.List=response.rows
      })
    },

  }
}
</script>

<style  scoped>
.box{
  background-color: #ecf0f6;
  padding: 10px;
}
.header{
  display: flex;
  padding: 10px 20px;
  background-color: #fff;

}
.header_timer{
  width: 200px;
  height: 50px;
  border: solid 1px #eee;
  text-align: center;
  line-height: 50px;
}
.date-box >>> .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 146px;
  margin: 0 10px;
}
.date-input >>> .el-input__inner {
  width: 146px;
  height: 50px;
}

.content{
  margin-top: 20px;
  background-color: #fff;
  padding: 10px;

}
</style>
